<template>
  <div class="block">
    <a-modal v-model:visible="visible" :footer="false" :title="'编辑流程'" :ok-loading="loading" width="60%" :destoy="false">
      <div>
        <ma-form v-model="stepForm.form" :columns="infoFormCol" :options="formOptions" v-if="type===1"/>
        <ma-form v-model="stepForm.form" :columns="jcFormCol" :options="formOptions" v-else/>
        <div v-for="(stepItem, _ik) in stepForm.items" :key="_ik" class="mt-4 p-4 border rounded">
          <ma-form v-model="stepItem.form" :columns="stepItemForm"  :options="formOptions"/>
          <div class="flex justify-end mt-2">
            <a-button type="primary" @click="addStepItem(_ik)" class="mr-2">新增步骤</a-button>
            <a-button type="primary" status="danger" v-if="stepForm.items.length > 1" @click="delStepItem(_ik)">删除步骤</a-button>
          </div>
        </div>
        <div class="flex justify-center mt-4">
          <a-button type="primary" @click="saveStep">保存流程</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { request } from "@/utils/request.js"
import { Message } from '@arco-design/web-vue'
import { get, set } from 'lodash'

const emit = defineEmits(['save-success'])

const visible = ref(false)

const stepInfo = ref({})
const loading = ref(false)
const formOptions = ref({
  layout: 'horizontal',
  showButtons: false,
})
const type = ref(1) // jc

const stepItemForm = ref([])

const formTypeData = [
  { label: '无', value: 0 },
  // { label: '获取活动码', value: 1 },
  { label: '图片上传', value: 2 },
  { label: '输入框', value: 3 },
  { label: '选择活动码', value: 4 },
]
const infoFormCol = ref([
  { title: '流程项', dataIndex: 'step_id', formType: 'select', dict: { url: 'prm/act_step/list?type=1', props: { label: 'title', value: 'id' }, translation: true } }
])
const infoItemForm = ref([
  { title: '步骤标题', dataIndex: 'title', formType: 'input', width: 80 },
  { title: '步骤内容', dataIndex: 'content', formType: 'editor', width: 80 },
  { title: '附件', dataIndex: 'files', width: 100, formType: 'upload', type: 'image',multiple: true },
  {
    title: '表单列表', dataIndex: 'form_list', formType: 'children-form', type: 'table', emptyRow: 1,
    formList: [
      { title: '表单标题', dataIndex: 'form_title', formType: 'input', width: 80 },
      { title: '表单类型', dataIndex: 'form_type', width: 100, formType: 'select', dict: { data: formTypeData, translation: true } },
    ]
  },
])

const stepForm = ref({form:{step_id:0}, items:[]})

//教程
const jcFormCol = ref([
  { title: '步骤选项', dataIndex: 'step_id', formType: 'select', dict: { url: 'prm/act_step/list?type=2', props: { label: 'title', value: 'id' }, translation: true } }
])
const jcItemForm = ref([
  { title: '步骤标题', dataIndex: 'title', formType: 'input', width: 80 },
  { title: '步骤内容', dataIndex: 'content', formType: 'editor', width: 80 },
])

const open = (record, t) => {
  type.value = t
  if(type.value === 2){
    stepItemForm.value = jcItemForm.value
  }else{
    stepItemForm.value = infoItemForm.value
  }
  stepInfo.value = record
  stepForm.value.form.step_id = record.step_id
  // 重置表单数据，解决二次打开数据残留问题
  stepForm.value.items = []
  visible.value = true
  if(record.step_id > 0){
    getStepDetail()
  }
  if(stepForm.value.items.length === 0){
    addStepItem(0)
  }
}

const getStepDetail = async () => {
  try {
    const ret = await request({
      url: 'prm/activity/getLcDetailByStepId',
      method: 'post',
      data: { act_id: stepInfo.value.activity_id,step_id: stepInfo.value.step_id }
    })
    if(ret.code !== 200){
      Message.error(ret.message)
      return
    }
    if(ret.data.step){
      set(stepForm.value,'items', ret.data.step)
      // stepForm.value.items = ret.data.step
    }
    console.log(stepForm.value)
  } catch (error) {
    console.error('获取活动详情失败:', error)
  }
}

// 修正: 正确实现添加步骤项的方法
const addStepItem = (_ik) => {
  stepForm.value.items.push({
    form: {
      title: '',
      content: '',
      files: [],
      form_list: [],
    }
  })
}

// 修正: 正确实现删除步骤项的方法
const delStepItem = (_ik) => {
  stepForm.value.items.splice(_ik, 1)
}

const saveStep = () => {
  // 保存逻辑
  console.log('保存步骤:', stepForm.value)

  // 保存逻辑
  request({
    url: 'prm/activity/saveLcDetailByStepId',
    method: 'post',
    data: { act_id: stepInfo.value.activity_id, step_id: stepInfo.value.step_id, step: stepForm.value }
  }).then(res => {
    console.log(res);
    if(res.code === 200){
      Message.success(res.message)
      visible.value = false
      emit('save-success')
    }
  })
}

defineExpose({ open })
</script>
